<template>
  <div class="page_container">
    <div class="page_h">信用卡在线申请</div>
    <div class="order_header">
      <el-row>
        <el-col :span="8">
          <div class="t1">您当前选择的卡产品</div>
          <div class="t2">{{ creditName }}</div>
          <img :src="picUrl" style="width:200px;" />
          <!-- <div class="t3">这是一段描述文字</div> -->
        </el-col>
        <el-col :span="16">
          <div class="activity">
            <div class="t1">近期热门活动</div>
            <img src="../images/hotActivity.jpg" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="page_steps">
      <el-steps :active="active" finish-status="finish">
        <el-step v-for="(item, index) in steps" :key="index">
          <template slot="title">
            <span>{{ item }}</span>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="order_content">
      <div class="order_info">
        仅持有在有效期内的二代身份证的新客户开放信用卡在线申请
      </div>
      <el-form label-width="200px" class="order_form" :model="form">
        <div class="order_title">基本信息</div>
        <el-form-item label="中文姓名" prop="reqName">
          <el-input
            placeholder="请输入您的中文姓名"
            v-model="form.reqName"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名拼音">
          <el-row type="flex" justify="space-between">
            <el-col :span="11">
              <el-input placeholder="姓" v-model="form.reqFirstName"></el-input>
            </el-col>
            <el-col :span="11">
              <el-input placeholder="名" v-model="form.reqLastName"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="身份证号码" prop="reqId">
          <el-input
            placeholder="请输入您的身份证号码"
            v-model="form.reqId"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="reqAddress">
          <el-input
            placeholder="请输入您的所在城市"
            v-model="form.reqAddress"
          ></el-input>
        </el-form-item>
        <div class="order_title">验证信息</div>
        <el-form-item label="手机号码" prop="reqMobile">
          <el-input
            placeholder="该号码将作为您的信用卡预留手机号"
            v-model="form.reqMobile"
          ></el-input>
        </el-form-item>
        <el-form-item label="校验码">
          <el-row type="flex" justify="space-between">
            <el-col :span="18">
              <el-input placeholder="校验码" v-model="picCode"></el-input>
            </el-col>
            <el-col :span="5">
              <img src="../images/timg.jpg" alt style="height:40px;" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="手机动态密码">
          <el-row type="flex" justify="space-between">
            <el-col :span="12">
              <el-input
                placeholder="获取手机动态密码"
                v-model="dynamicCode"
              ></el-input>
            </el-col>
            <el-col :span="11">
              <el-button
                type="primary"
                size="medium"
                @click="verifyCode()"
                :disabled="disabled"
                ref="timer"
                >获取手机动态密码</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="order_agree">
        <el-checkbox v-model="checked" class="agreeOrRefuse"></el-checkbox
        >本人已阅读并知晓 <a>《上海银行信用卡章程》</a>、
        <a>《上海银行信用卡领用合约》</a>、 <a>《上海银行信用卡收费标准》</a>、
        <a>《重要提示》</a>、
        <a>《声明、授权及签署》</a
        >所载内容，并授权上海银行对本人中国人民银行金融信用信息基础数据库等征信情况、申领信息真实性及其他有关方面的情况进行查询。
      </div>
      <div class="buttonDiv">
        <el-button type="primary" size="medium" @click="next()" class="btn-next"
          >下一步</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      steps: ["基本信息", "详细信息", "其他信息", "预览并完成"],
      active: 1,
      checked: false,
      time: 60,
      disabled: false,
      city: "1",
      form: {},
      picCode: "",
      dynamicCode: "",
      cardID: "",
      picUrl: "",
      creditName: ""
    };
  },
  methods: {
    next() {
      window.sa.track("$CollecCreditFlowOverClick", {
        $element_content: this.cardID
      });
      let params = {
        creditId: this.cardID,
        picUrl: this.picUrl
      };
      Object.assign(params, this.form);
      this.$remote(
        "/runtime/poccreditreq/insertPocCreditReq.action",
        params
      ).then(() => {
        this.$router.push({
          name: "orderCardRes",
          params: { id: this.cardID, isHeader: false }
        });
      });
    },
    verifyCode() {
      this.timer();
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.disabled = true;
        this.dynamicCode = "2233";
        this.$refs.timer.$el.innerText = this.time + "s后可再次获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 60;
        this.disabled = false;
        this.$refs.timer.$el.innerText = "获取手机动态密码";
      }
    }
  },
  created() {
    window.sa.track("$pageview", {
      $url_path: "orderCardPre"
    });
    this.$nextTick(function() {
      this.cardID = this.$route.params.cardID;
      this.$remote("/runtime/poccredit/selectOne.action", {
        id: this.cardID
      }).then(res => {
        console.log(res);
        this.picUrl = res.picUrl;
        this.creditName = res.creditName;
      });
    });
  }
};
</script>
<style scoped>
.el-button--primary {
  background-color: #06469e;
  border-color: #06469e;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: #06469e;
  border-color: #06469e;
  color: #fff;
}
.page_container {
  margin: 5px 10px;
  width: 100%;
}
.page_h {
  font-size: 20px;
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 10px;
  color: #06469e;
  position: relative;
  line-height: 35px;
  border-bottom: 2px solid #06469e;
}

.page_h::after {
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  border-left: 2px solid #06469e;
  position: absolute;
  top: 8px;
  left: 0;
}
.order_header {
  width: 100%;
  height: 200px;
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  text-align: center;
}

.order_header .t1 {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
}
.order_header .t2 {
  font-size: 12px;
}
.order_header .t3 {
  color: #6680cc;
  font-size: 12px;
}

.order_header .activity img {
  height: 140px;
}

.page_steps {
  border: 1px solid #dedede;
  border-radius: 5px;
  text-align: left;
  padding: 10px 50px;
}
.order_content {
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.order_content .order_info {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.order_form {
  width: 600px;
}
.order_form .order_title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 48px;
}
.order_agree {
  text-align: left;
}
.order_agree a {
  color: #06469e;
}
.buttonDiv {
  line-height: 60px;
  text-align: center;
}
.agreeOrRefuse {
  margin-right: 10px;
}
.el-steps >>> .el-step__head.is-finish {
  color: #06469e;
  border-color: #06469e;
}
.el-steps >>> .el-step__title.is-finish {
  color: #06469e;
}
</style>
